<template>
  <span class="single-line" v-text="props.symbol + ' ' + amount" :style="{ width: width }"></span>
</template>
<script setup lang="ts">
import XEUtils from 'xe-utils'
import { computed } from 'vue'

const props = defineProps({
  value: {
    type: Number,
    default: 0.0,
  },
  symbol: {
    type: String,
    default: '$',
  },
  width: {
    type: String,
    default: 'auto'
  }
})
const amount = computed(() => {
  return XEUtils.commafy(XEUtils.toFixed(props.value, 2))
})
</script>

<style scoped lang="scss"></style>
